<template>
  <view class="genealogyPage allColumnCenter">
    <!--  头部  -->
    <header-title ref="headerTitle" isDisplayBack title="中华姓氏" is-fixed background="#f5f5f5"
                  @getPageHeight="getPageHeight"></header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <view class="genealogyPage_head row items-center justify-between">
      <view class="allRowCenter"
            :class="selectPageIndex == index? 'genealogyPage_head_selectList':'genealogyPage_head_list'"
            v-for="(item,index) in pagesList"
            :key="index" @click.stop="switchPageIndex(index)">
        <text class="genealogyPage_head_list_text">{{ item.name }}</text>
      </view>
    </view>
    <mr-zhong-wu v-if="selectPageIndex == 0"></mr-zhong-wu>
    <worship-ancestors-and-seek-roots v-if="selectPageIndex == 1"></worship-ancestors-and-seek-roots>
  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";
import MrZhongWu from "./components/mrZhongWu.vue";
import WorshipAncestorsAndSeekRoots from "./components/worshipAncestorsAndSeekRoots.vue";

export default {
  components: {WorshipAncestorsAndSeekRoots, MrZhongWu, HeaderTitle},
  data() {
    return {
      selectPageIndex: 0,
      pagesList: [
        {
          name: '中华姓氏'
        },
        {
          name: '拜祖寻根'
        }
      ],
      headerHeight: 0
    };
  },
  onReady() {
    this.$nextTick(() => {
      this.$refs.headerTitle.getPageHeight()
    })
  },
  methods: {
    // 获取头部高度
    getPageHeight(number) {
      this.headerHeight = number
    },
    // 切换页面
    switchPageIndex(index) {
      this.selectPageIndex = index
    }
  },
}
</script>

<style lang="scss">
.genealogyPage {
  width: 750rpx;
  min-height: 100vh;
  background: #FBF3E1;
  overflow: hidden;

  .genealogyPage_head {
    width: 702rpx;

    .genealogyPage_head_list {
      width: 344rpx;
      height: 80rpx;
      background: #FAE6BC;
      border-radius: 15rpx 15rpx 0rpx 0rpx;

      .genealogyPage_head_list_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #292929;
      }
    }

    .genealogyPage_head_selectList {
      width: 344rpx;
      height: 80rpx;
      background: #CC8A00;
      border-radius: 15rpx 15rpx 0rpx 0rpx;

      .genealogyPage_head_list_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
      }
    }
  }
}
</style>
